/*
 * @Author: xiaosihan 
 * @Date: 2024-12-25 00:01:55 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-12-25 09:11:44
 */

import styles from "./toolThreadColor.module.less";
import editorStore from "@/editorComponent/editorStore";
import clsx from "clsx";
import { get, isUndefined } from "lodash";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import threadColorIconPNG from "./threadColorIcon.png";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { Checkbox, Tooltip } from "antd";

// 缝线颜色组件
export default function ToolThreadColor() {

  const showTop = useRef(false);
  const [visible, setVisible] = useState(true);
  const [threadColor, setThreadColor] = useState<`#${string}`>("#ffffff");
  const [disable, setDisable] = useState(false);
  const [fillType, setfillType] = useState(-1); // 印刷工艺 0 是满版印 1是局部印

  useEffect(() => autorun(() => {
    const { activeComponent, goodsData, design_data, needUpdateTime } = editorStore;
    const fillType = get(goodsData, ["fillType"]);
    setfillType(isUndefined(fillType) ? -1 : fillType);
    setThreadColor(design_data.threadColor || "#ffffff");
    if (fillType === 0) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);


  return (
    <div
      className={clsx(styles.toolThreadColor, visible && styles.visible)}
    >
      <img className={styles.icon} src={threadColorIconPNG} alt="" />
      缝线颜色&nbsp;
      <Tooltip
        title="缝线颜色"
        placement="top"
      >
        <QuestionCircleOutlined />
      </Tooltip>

      <div className={styles.colorBlocks} >
        {
          ["#ffffff", "#B4B5B9", "#000000"].map((color: any) => {
            return (
              <span
                key={color}
                className={styles.colorBlock}
                style={{ backgroundColor: color }}
                onClick={() => {
                  editorStore.setThreadColor(color);
                  setThreadColor(color);
                }}
              >
                {threadColor === color ? "✔" : ""}
              </span>
            )
          })
        }
      </div>


    </div>
  );
}